<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div v-if="pageflag" class="chart-container">
    <div class="box">
      <div class="list">
        <div class="list-header">
          <div class="first">品牌</div>
          <div class="second">数量</div>
          <div class="last">占比</div>
        </div>
        <div class="list-body">
          <vue-seamless-scroll :data="tableData" :class-option="defaultOption">
            <div class="list-item" v-for="(item, index) in tableData" :class="index % 2 == 1 ? ' deep_color' : ''"
              :key="index" @click="chooseItem(index)"
              :style="index == chooseIndex ? 'background: linear-gradient( 270deg, rgba(26,123,230,0) 0%, rgba(69,193,255,0.8) 100%);' : ''">
              <div class="first">{{ item.waybillname }}</div>
              <div class="second">{{ item.waybillNum }}</div>
              <div class="last">{{ item.waybillCompleteNum }}</div>
            </div>
          </vue-seamless-scroll>
        </div>

      </div>
    </div>
    <div class="box-right" style="display: flex;">
      <Echart id="charts_rcb" :options="options" class="left_center_inner" ref="charts" height="270px" />
      <!-- 底座背景 -->
      <div class="bg"></div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { graphic } from 'echarts';
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
    vueSeamlessScroll
  },
  computed: {
    defaultOption() {
      return this.$store.state.setting.defaultOption;
    }
  },
  data() {
    return {
      options: {},
      optionData: [
        {
          name: '东风',
          value: 38,

          itemStyle: {
            color: '#269CA7',
          },
        },
        {
          name: '解放',
          value: 22,
          itemStyle: {
            color: '#EF8036',
          },
        },
        {
          name: '福田',
          value: 24,
          itemStyle: {
            color: '#A4D9F5',
          },
        },
        {
          name: '江淮',
          value: 10,
          itemStyle: {
            color: '#F6C558',
          },
        },
        {
          name: '奔驰',
          value: 6,
          itemStyle: {
            color: '#1B53A4',
          },
        },
        {
          name: '现代',
          value: 6,
          itemStyle: {
            color: '#1B53A4',
          },
        },
      ],
      tableData: [
        { index: 0, waybillname: '东风', waybillNum: 18864, waybillCompleteNum: '18%' },
        { index: 1, waybillname: '解放', waybillNum: 17245, waybillCompleteNum: '16%' },
        { index: 2, waybillname: '福田', waybillNum: 16532, waybillCompleteNum: '15%' },
        { index: 3, waybillname: '江淮', waybillNum: 15782, waybillCompleteNum: '14%' },
        { index: 4, waybillname: '奔驰', waybillNum: 14023, waybillCompleteNum: '13%' },
        { index: 5, waybillname: '现代', waybillNum: 12120, waybillCompleteNum: '12%' },

      ],
      currentRowId: '',
      pageflag: true,
      timer: null,
      chooseIndex: '10'
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    chooseItem(index) {
      this.chooseIndex = index
    },
    cellStyle({ row }) {
      var styleJson = {
        background: 'none',
        color: '#fff',
        'text-align': 'center',
        'line-height': '24px',
        'padding': 0
      }
      if (row.index == this.currentRowId) {
        styleJson.background = 'linear-gradient( 270deg, rgba(26,123,230,0) 0%, rgba(69,193,255,0.8) 100%);'
      } else {
        styleJson.background = 'none'
      }
      return styleJson;
    },
    getData() {
      this.pageflag = true;

      this.$nextTick(() => {
        this.init();
      });
      // this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init(currentData) {
      let legend = {
        bottom: '0',
        width: 250,
        // height: 100,
        orient: 'horizontal', // 水平显示
        left: 'center', // 水平居中
        itemGap: 10,
        formatter: function (param) {
          return param;
        },
      };
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      const options = getPie3D(this.optionData, 0.85, 155, 18, 12, 0.9, legend);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      options.series.push({
        name: '车辆品牌分布', //自己根据场景修改
        backgroundColor: 'transparent',
        type: 'pie',
        label: {
          // show: true,
          opacity: 1,
          fontSize: 13,
          lineHeight: 20,
          // normal: {
          show: true,
          formatter: '{d}%' // 自定义标签格式，{b} 表示名称，{d} 表示数据值
          // }
        },
        startAngle: -20, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ['20%', '50%'],
        center: ['50%', '50%'],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      // options.series.push({
      //   name: '电梯状态', //自己根据场景修改
      //   backgroundColor: 'transparent',
      //   type: 'pie',
      //   label: {
      //     opacity: 1,
      //     fontSize: 13,
      //     lineHeight: 20,
      //   },
      //   startAngle: -40, // 起始角度，支持范围[0, 360]。
      //   clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
      //   radius: ['20%', '50%'],
      //   center: ['50%', '50%'],
      //   data: this.optionData,
      //   itemStyle: {
      //     opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
      //   },
      // });

      this.options = options;
    },
  },
};
</script>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 600px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;

  .box {
    width: 50%;
    margin-top: 10px;
    z-index: 0;
    // border: 1px solid red;
    display: flex;
    justify-content: center;

    .list {
      width: 245px;
      font-size: 14px;

      .list-header {
        width: calc(100% - 2px);
        background: rgba(21, 77, 160, 0.44);
        display: flex;
        justify-content: space-around;
        align-items: center;
        line-height: 26px;

        div {
          width: 33%;
          text-align: center;
        }
      }

      .list-body {
        // border: 1px solid red;
        width: 100%;
        height: 170px;
        overflow: hidden;
      }

      .list-item {
        width: calc(100% - 2px);
        color: #ffffff;
        margin-top: 2px;
        margin-bottom: 2px;
        line-height: 26px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;

        div {
          width: 33%;
          text-align: center;
          cursor: pointer;
        }
      }

      .deep_color {
        background: rgba(8, 44, 100, 0.7);
      }

      .chooseDeep {
        background: linear-gradient(270deg, rgba(26, 123, 230, 0) 0%, rgba(69, 193, 255, 0.8) 100%);
      }
    }

  }

  .box-right {
    width: 50%;
  }

  .left_center_inner,
  .bg {
    // margin-left: -50px;
    margin-top: 10px;
    width: 100%;
    height: 100%;
  }

  .left_center_inner {
    position: absolute;
    top: -85px;
    left: 23%;
    // width: calc(100% + 100px);
    z-index: 1;
  }

  .bg {
    // position: absolute;
    bottom: 26px;
    left: 45%;
    // z-index: -1;
    width: 100%;
    height: 200px;
    background: no-repeat center;
    background-image: url('../../assets/img/launch/pie_bg1.png');
    background-size: 95% 95%;
    transform: translateX(-50%);
  }
}
</style>
